import React, { FC } from 'react'
import {observer,inject} from 'mobx-react'
import {useNavigate,useLocation} from 'react-router-dom'
//导入侧边导航信息
import { routerList } from './../utils/routerlist';
import {Menu,Layout} from 'antd';
const {SubMenu} = Menu;
const { Sider } = Layout;

 const Side:FC<any>=({
   uinfo,
   collapsed

 })=> {
   const {userInfo}=uinfo
   const {myCollapsed}=collapsed
   const navigate =  useNavigate()
   //获取地址栏信息
   const location = useLocation()

   //点击导航信息进行跳转
   const menuClick = (obj:any)=>{
    console.log(obj)
    navigate(obj.key)
}
  //导航信息只能出现一个
  const [openKeys, setOpenKeys] = React.useState(['']);
  const onOpenChange = (keys:any) => {
    console.log(keys);
    const latestOpenKey = keys.find((key:any) => openKeys.indexOf(key) === -1);
    setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
  };
  
   //根剧routerList遍历出侧边导航信息
   const renderMenu=(list:any)=>{
      if(userInfo){
        //拿到用户信息的role权限
        const {role}=userInfo
        return list.map((item:any,index:any)=>{
          if(item.children){
            return (
              <SubMenu key={item.path} title={item.title} icon={item.icon}>
                {renderMenu(item.children)}
              </SubMenu>
            )
          }
          else{
            return(
            <Menu.Item key={item.path} icon={item.icon}>
                {item.title}
            </Menu.Item>
              )
          }
        })
        
      }else{
        return null
      }
   }
   console.log(location);
   

  return (
    <Sider
    collapsed={myCollapsed}
    >
         <div className="logo-box" style={{ width: '100%', padding: 20, }}>
                <img src={require("../assets/images/logo02.png")} alt="" style={{ width: '100%', height:"auto"}} className="logo" />
        </div>

        <Menu
            defaultSelectedKeys={[location.pathname]}
            defaultOpenKeys={[location.pathname.split('/').slice(0,4).join('/')]}
            selectedKeys={[location.pathname]}
            mode="inline"
            theme="light"
            onClick={menuClick}
            onOpenChange={onOpenChange}
            openKeys={openKeys}
            
        >
            {renderMenu(routerList)}
        </Menu>

    </Sider>
  )
}
export default inject('uinfo','collapsed')(observer(Side))